<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="/WEB-INF/html.tld" prefix="html" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:url var="rateBandsJsonObject" value="/admin/financial/ratebands/json" />
		<div class="content-backgroud">

<form:form id="financialProduct" modelAttribute ="financial" method="POST" action="${url}" name="rateBand">
	<html:table attributes="class='inputTable'">
	<html:tr>
    <html:td attributes="colspan='4'"><div class="formHeader">Rate Band Form</div></html:td>
  </html:tr>
	  <html:tr>
	    
	    <html:td><label><spring:message code="label.code" /></label></html:td>
	    <html:td><label><spring:message code="label.rate" /></label></html:td>
	    <html:td><label><spring:message code="label.min.term" /></label></html:td>
	    <html:td><label><spring:message code="label.max.term" /></label></html:td>
	   
	  </html:tr>
	  <html:tr>
	   
	    <html:td append="div"><form:input path="rateband.code" name="rateband.code" class='required'></form:input></html:td>
	    <html:td append="div"><form:input path='rateband.rate' name='rateband.rate'></form:input></html:td>
	    <html:td append="div">
	    	<form:select path="rateband.minTerm" class='required' items="${lovBean.list('TERM')}" />
	    </html:td>
	      <html:td append="div">
	    	<form:select path="rateband.maxTerm" items="${lovBean.list('TERM')}"/>
	    </html:td>
	  </html:tr>
	<html:tr>
		   
		
		   <html:td><button type="button" class="mediumButton"  id="btnAddRateBand">Submit</button><a class="mediumButton" href="javascript:cancelForm();">Cancel</a></html:td>
		  </html:tr>
	</html:table>
	<form:hidden path="financial.financialProductId"  name="financial.financialProductId"/>
	 <form:hidden path="ratecard.rateCardId"  name="ratecard.rateCardId"/>
	<form:hidden path="rateband.rateBandId" name="rateband.rateBandId"/>
</form:form>
<div id="rateBandView"></div>
</div>

<script>
$(function () {
	
	//if($("input[name='financial.financialProductId']").val()==""|| $("input[name='ratecard.rateCardId']").val()=="")
		 // $("input, select, button").attr('disabled',true);
	
	
	
	var colM = [

{dataType: "string",dataIndx: "code", title: "Code",  width: 100},
{dataType: "string",dataIndx: "desc", title: "Description", width: 150},
{dataType: "string",dataIndx: "rate", title: "Rate (%)",  width: 150},
{dataType: "string",dataIndx: "minTerm", title: "Min Term", field: "minTerm", width: 150},
{dataType: "string",dataIndx: "maxTerm", title: "Max Term", field: "maxTerm", width: 150}

	];
	  
	var dataModel = {
		        location: "remote",
		        sorting: "remote",
		       /*  paging: "remote", */
		        dataType: "JSON",
		        method: "GET",
		        curPage: 1,
		      /*   rPP: 30,
		        sortIndx: 0,
		        sortDir: "up",
		        rPPOptions: [30, 40, 50, 100, 500, 1000], */
		        getUrl: function () {
		            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
		            var sort = ['userId', 'userName', 'firstName', 'lastName', 'languageCode', 'userStatus'];
		            return { url: "${rateBandsJsonObject}", data: "cur_page=" + this.curPage + "&records_per_page=" + 
		                this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir
		                + "&financial.financialProductId=" + $("input[name='financial.financialProductId']").val()
		                + "&ratecard.rateCardId=" + $("input[name='ratecard.rateCardId']").val()
		                + "&rateband.rateBandId=" + $("input[name='rateband.rateBandId']").val()
		               };
		        },
		        getData: function (dataJSON) {
		            
		            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON };                
		        }
		    };
	    var grid1 = $("div#rateBandView").pqGrid({ /*width: 900, height: 400,*/
		        dataModel: dataModel,
		        colModel: colM,
		        resizable: true,            
		        columnBorders: true,
		        flexHeight: true,
	            flexWidth: true,
	            editable: true,
	            scrollModel: { horizontal: false },
	            topVisible:true
		        
		    });
	    grid1.on("pqgridcellsave", function (evt, ui) {                       
	        var cols = ["scountry","custname","orderid","orderdate","requireddate"];
	        var data = ui.data, rowIndxPage = ui.rowIndxPage, dataIndx = ui.dataIndx, val = data[rowIndxPage][dataIndx];
	        var orderID = data[rowIndxPage][2];
	        console.log(data);
	       /*  var url = "../Demos/saveRecord?orderID=" + orderID+"&fieldname="+cols[dataIndx]+"&value="+val;
	        $.ajax({ url: url }); */
	    });
	    //for details
	 /*    $.extend(colM[1], {
	    render: function (ui) {
	        var rowData = ui.rowData;
	     
	            return '<a href="javascript:showObjectDetaisl(\''+rowData.financialProductId+'\',\'financialGridView\');">' + rowData.financialProductCode+'</a>';
	       
	    }
	  });
	    //for edit
	    $.extend(colM[0], {
	  	  render: function (ui) {
	  	      var rowData = ui.rowData;
	  	   
	  	          return '<a href="javascript:editObject(\''+rowData.financialProductId+'\',\'financial.financialProductId\');">' + rowData.name+'</a>';
	  	     
	  	  }
	  	}); */


$("#btnAddRateBand").on("click",function(){
	
	submitForm();
	return false;
});
    function onSuccess(result)
    {
    	/* console.log(result);
    	 var DM = $grid1.pqGrid("option", "dataModel");
         var data = DM.data;
         var temp=[];
         temp[0]=result.name;
         temp[1]=result.description;
         temp[2]=result.effectiveDate;
         temp[3]=result.expiryDate;
         console.log(temp);
         data.push(temp);
         console.log(data); */
         $grid1.pqGrid("refreshDataAndView");
         
         $("input[name='ratecard.rateCardId']").val(result.rateCardId);
       //TODO:ajax error rendering put it on common place
      	$( result.fieldError).each(function() {
     		console.log(this.field);
     		$('input[name="'+this.field+'"]').css( "border",'1px solid red' );
     	});
         
         if(result.status=="SUCCESS")
        	 $("#financialProduct").clear();
         
        console.log( $("input[name='financial.financialProductId']").val());
        	 
    }
    
   

 function submitForm()
{
	 $('.amount').inputmask('remove');
		
		jQuery.ajaxSettings.traditional = true;

		var formData = $("#financialProduct").serializeObject();
		//formData.rateCards=assignedRate;

		var params={url:"admin/financial/rateband/add",success:onSuccess,data:formData,type:"POST",dataType:"json"};
		doAjax(params);
}

});
</script>
